<template>
  <el-card shadow="never" body-style="padding: 0;">
    <template v-slot:header>
      <div class="ele-cell">
        <div class="ele-cell-content title">余额统计</div>
        <div :class="['ele-inline-block', { 'hidden-xs-only': styleResponsive }]">
          <el-radio-group v-model="saleSearch.dateType" size="small" @change="onSearchTypeChange">
            <el-radio-button :label="0">今天</el-radio-button>
            <el-radio-button :label="1">近一周</el-radio-button>
            <el-radio-button :label="2">近一月</el-radio-button>
            <el-radio-button :label="3">近一年</el-radio-button>
          </el-radio-group>
        </div>
        <div
          :class="['ele-inline-block', { 'hidden-sm-and-down': styleResponsive }]"
          style="width: 260px; margin-left: 10px"
        >
          <el-date-picker
            unlink-panels
            type="daterange"
            class="ele-fluid"
            end-placeholder="结束日期"
            start-placeholder="开始日期"
            v-model="saleSearch.datetime"
            range-separator="至"
            size="small"
            value-format="yyyy-MM-dd"
          />
        </div>
        <div style="margin-left: 10px">
            <el-button
              type="primary"
              @click="search"
              icon="el-icon-search"
              class="ele-btn-icon"
              size="small"
            >
              查询
            </el-button>
            <el-button  size="small" @click="reset">重置</el-button>
        </div>
      </div>
    </template>
   
    <el-row>
      <el-col v-bind="styleResponsive ?   { lg: 24, md: 24 } :  { span: 24 }" >
       
        <v-chart
          ref="saleChart"
          style="height: 400px"
          :option="saleChartOption"
        />
      </el-col>
      
    </el-row>
  </el-card>
</template>

<script>
  
  import { getAccountChartData } from '@/api/dashboard/analysis';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { LineChart,BarChart,PieChart  } from 'echarts/charts';
  import {
    GridComponent,
    TooltipComponent,
    LegendComponent
  } from 'echarts/components';
  import VChart from 'vue-echarts';
  import { echartsMixin } from '@/utils/echarts-mixin';
  use([
    CanvasRenderer,
    LineChart,
    BarChart,
    PieChart,
    GridComponent,
    TooltipComponent,
    LegendComponent
  ]);


  use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);

  export default {
    components: { VChart },
    mixins: [echartsMixin(['saleChart'])],
    data() {
      return {
        // 销售量搜索参数
        saleSearch: {
          type: 'consumeCount',
          dateType: 0,
          datetime: ''
        },
        // 充值趋势数据
        saleroomData1: [],
        // 会员趋势数据
        saleroomData2: [],
        // 电影订单趋势数据
        saleroomData3: [],
        // 佣金记录趋势数据
        saleroomData4: [],
        // 访问量趋势数据
        saleDate: [],
        saleRankData1:[],
        saleRankData2:[],
        saleRankData3:[],
        saleRankData4:[],
        // 销售额柱状图配置
        saleChartOption: {}
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created() {
      this.getSaleroomData();
    },
    methods: {
      /* 搜索 */
      search() {
        this.getSaleroomData();
      },
      /*  重置 */
      reset() {
        this.saleSearch.datetime = [];
        this.search();
      },
      onSearchTypeChange(){
        this.saleSearch.datetime = [];
        this.getSaleroomData();
      },
      /* 获取销售量数据 */
      getSaleroomData() {

        let datyType = this.saleSearch.dateType;
        let datetime = this.saleSearch.datetime;

        if(datetime != ''){
          datyType = 5;
        }

        const [d1, d2] = datetime ?? [];

        getAccountChartData({
          type:datyType,
          start_time:d1 ? d1 + ' 00:00:00' : '',
          end_time: d2 ? d2 + ' 23:59:59' : ''
        })
          .then((data) => {
            this.saleDate = data.date;
            this.saleroomData1 = data.recharge;
            this.saleroomData2 = data.consume;

            this.onSaleTypeChange();
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      },

      /* 销售量tab选择改变事件 */
      onSaleTypeChange() {
        this.saleChartOption = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['充值点数','扣除点数'],
            right: 20
          },
          grid: {
            left: "5%",
            bottom: "8%",
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: this.saleDate
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '充值点数',
              type: 'line',
              smooth: true,
              symbol: 'none',
              areaStyle: {
                opacity: 0.5
              },
              data:  this.saleroomData1.count
            },
            {
              name: '扣除点数',
              type: 'line',
              smooth: true,
              symbol: 'none',
              areaStyle: {
                opacity: 0.5
              },
              data:  this.saleroomData2.count
            }
          ]
        };
      }
    }
  };
</script>

<style lang="scss" scoped>
  .title {
    padding-left: 10px;
    border-left: 3px solid #0256ff;
    font-size: 15px;
    line-height: 15px;
    color: #303133;
  }

  /* 销售额、访问量工具栏 */
  .demo-monitor-tool {
    padding: 0 20px;

    .demo-monitor-tabs {
      height: 51px;
    }

    :deep(.el-tabs__item) {
      height: 51px;
      line-height: 51px;
      font-size: 15px;
    }

    :deep(.el-tabs__nav-wrap:after) {
      display: none;
    }
  }

  /* 小标题 */
  .demo-monitor-title {
    padding: 0 20px;
    margin: 15px 0 5px 0;
  }

  /* 排名 item */
  .demo-monitor-rank-item {
    padding: 0 20px;
    line-height: 20px;
    margin-top: 18px;
  }
</style>
